<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入订单名搜索"
                    v-model="searchOrder"
                    clearable
                    @clear="getOrderList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addOrder">添加订单</el-button>
        </el-col>
      </el-row>

      <el-table :data="orderList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单号" prop="orderNum"></el-table-column>
        <el-table-column label="订单名称" prop="demands.demands"></el-table-column>
        <el-table-column label="需求用户" prop="demandUsername"></el-table-column>
        <el-table-column label="接单用户" prop="receiveUsername"></el-table-column>
        <el-table-column label="总价" prop="totalPrice"></el-table-column>
        <el-table-column label="支付时间" prop="payTime">
          <template slot-scope="scope">
            <span v-if="scope.row.payTime === null">
              未支付
            </span>
            <span v-else>
              {{$moment(scope.row.payTime).format("YYYY-MM-DD hh:MM:ss")}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="交易文件" prop="filename">
          <template slot-scope="scope">
            <el-image
              style="width: 40%;cursor: pointer;"
              :src="scope.row.filename"
              :preview-src-list="imgList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="需求备注" prop="demandRemarks"></el-table-column>
        <el-table-column label="接单备注" prop="receiveRemarks"></el-table-column>


        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">待确认订单</span>
            <span v-else-if="scope.row.status === 1">待付定金</span>
            <span v-else-if="scope.row.status === 2">待上传作品</span>
            <span v-else-if="scope.row.status === 3">待下载、付尾款</span>
            <span v-else-if="scope.row.status === 4">待评价</span>
            <span v-else-if="scope.row.status === 5">待完成</span>
            <span v-else-if="scope.row.status === 6">已完成</span>
            <span v-else>被拒绝</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="display: inline-block;" width="125px">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改订单信息" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除订单" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" @click="deleteOrder(scope.row)"
                         size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog
      title="修改订单信息"
      :visible.sync="editDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="editDialogClosed">

      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-form-item label="订单名称" prop="demands.demands">
          <el-input v-model="editForm.demands.demands" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="statusForm">
          <el-input v-model="editForm.statusForm" disabled></el-input>
        </el-form-item>
        <el-form-item label="需求备注" prop="demandRemarks">
          <el-input v-model="editForm.demandRemarks"></el-input>
        </el-form-item>
        <el-form-item label="接单备注" prop="receiveRemarks">
          <el-input v-model="editForm.receiveRemarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOrder(editForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import {
        adminDeleteOrderById,
        changeOrderById,
        getOrderByOrderId,
        selectAllOrderByPage
    } from "../../assets/api/orderApi";


    export default {
        name:'orders',
        data() {
            return {
                orderList: [],
                searchOrder: '',
                pageNum: 1,
                pageSize: 5,
                total: 0,
                options: [],
                editDialogVisible: false,
                imgList: [],
                editForm: {demands: {demands:''}, status: '', demandRemarks: '', receiveRemarks: '', statusForm:''},
            }
        },
        methods: {
            getOrderList() {
                let data = {};
                data.demands = this.demands;
                selectAllOrderByPage(this.pageNum, this.pageSize, data).then((res) => {
                    if (res.code === 200) {
                        this.orderList = res.data.records;
                        this.total = res.data.total;
                        for (let i = 0; i < this.orderList.length; i++) {
                            this.imgList[i] = this.orderList[i].filename;
                        }
                    }

                })
            },
            deleteOrder(order) {
                const confirmResult = this.$confirm(
                    '此操作将永久删除该订单, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    let data = {};
                    data.orderId = order.orderId;
                    adminDeleteOrderById(data).then((res) => {
                        if (res.code === 200) {
                            this.$message.success(res.message);
                            this.getOrderList();
                        } else {
                            this.$message.error('删除订单失败！');
                        }

                    })
                }).catch(() => {
                    this.$message.info('已取消删除');
                });

            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getOrderList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getOrderList();
            },
            addOrder() {
                this.$router.push('/addOrder')
            },
            showEditDialog(order) {
                this.editDialogVisible = true;
                let data = {};
                data.orderId = order.orderId;
                getOrderByOrderId(data).then((res) => {
                        if (res.code === 200) {
                            this.editForm = res.data;
                            if (this.editForm.status == 0) {
                                this.statusForm = '待确认订单';
                            } else if (this.editForm.status == 1) {
                                this.editForm.statusForm = '待付定金';
                            } else if (this.editForm.status == 2) {
                                this.editForm.statusForm = '待上传作品';
                            } else if (this.editForm.status == 3) {
                                this.editForm.statusForm = '待下载、付尾款';
                            } else if (this.editForm.status == 4) {
                                this.editForm.statusForm = '待评价';
                            } else if (this.editForm.status == 5) {
                                this.editForm.statusForm = '待完成';
                            } else if (this.editForm.status == 6) {
                                this.editForm.statusForm = '已完成';
                            } else if (this.editForm.status == -1) {
                                this.editForm.statusForm = '被拒绝';
                            }
                        } else {
                            this.$message.error("获取订单失败！");
                        }

                    }
                )
            },
            editDialogClosed() {
                this.$refs.editFormRef.resetFields();
            },
            changeOrder() {
                    let data = {};
                    data.orderId = this.editForm.orderId;
                    data.demandRemarks = this.editForm.demandRemarks;
                    data.receiveRemarks = this.editForm.receiveRemarks
                    changeOrderById(data).then((res) => {
                        if (res.code !== 200) {
                            this.$message.error("修改订单失败！");
                        } else {
                            this.editDialogVisible = false;
                            this.getOrderList();
                            this.$message.success(res.message);
                        }
                    })
            },
        },
        created() {
            this.getOrderList();
        }
    }
</script>

<style scoped>
  @import "../../styles/css/global.css";

</style>
